<script setup>
import MoniterItem from "@/components/MoniterItem2.vue";
import * as echarts from "echarts";
import {inject, onMounted} from "vue";

const $axios = inject("$axios");

function personAreaStat() {
  $axios.get("person_info/personAreaStat", {
    params: {standard: 'community'}
  }).then(res=>{
    let name = [],persons=[],floats=[],notFix=[];
    console.log(res)
    res.data.data.forEach(item=>{
      name.push(item.standard)
      persons.push(item.persons)
      floats.push(item.floats)
      notFix.push(item.notFix)
    })
    var dom = document.getElementById("townshipChart");
    var myChart = echarts.init(dom, null, {
      renderer: "canvas",
      useDirtyRect: false,
    });

    let option = {
      legend: {
        data: ['常住人口', '非常住人口', '流动人口'],
        textStyle: {
          color: '#FFF'
        }
      },
      color:['#F9A300','#0E5FFF','#50D682','#6236FF'],
      xAxis: [
        {
          type: 'category',
          axisLine: {
            show: true,
            lineStyle: {
              color: "#3D90E8"
            }
          },
          axisTick: {show: false},
          splitLine: {show: false},
          data: name
        }
      ],
      yAxis: [
        {
          name: '(万人)',
          type: 'value',
          axisLine: {
            show: true,
            lineStyle: {
              color: "#3D90E8"
            }
          },
          axisTick: {show: false},
          splitLine: {show: false},
        }
      ],
      series: [
        {
          name: '常住人口',
          type: 'bar',
          showBackground: true,
          emphasis: {
            focus: 'series'
          },
          data: persons,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 1, color: 'rgba(55,250,198,0.1)' },
              { offset: 0, color: '#37FAC6' }
            ])
          },
        },
        {
          name: '非常住人口',
          type: 'bar',
          showBackground: true,
          emphasis: {
            focus: 'series'
          },
          data: floats,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 1, color: 'rgba(231,140,53,0.1)' },
              { offset: 0, color: '#E78C35' }
            ])
          },
        },
        {
          name: '流动人口',
          type: 'bar',
          showBackground: true,
          emphasis: {
            focus: 'series'
          },
          data: notFix,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 1, color: 'rgba(26,207,255,0.1)' },
              { offset: 0, color: '#1ACFFF' }
            ])
          },
        }
      ]
    };
    if (option && typeof option === "object") {
      myChart.setOption(option);
    }
    window.addEventListener("resize", myChart.resize);
  });
}

onMounted(() => {
  personAreaStat();

});
</script>

<template>
  <MoniterItem img="2" style="height: 100%;" title="各乡镇人口分布">
    <template #content style="height: 100%;">
      <div style="height: 100%" id="townshipChart"></div>
    </template>
  </MoniterItem>
</template>

<style scoped>

</style>